import { useState } from 'react'

// http://geek.itheima.net/v1_0/channels
// const URL = 'http://geek.itheima.net/v1_0/channels'

function useToggle() {
  const [value, setValue] = useState(true)
  const toggle = () => {
    setValue(!value)
  }
  return { value, toggle }
}

// 封装自定义hook通用思路
// 1.声明一个以use打头的函数
// 2.在函数体内封装可复用的逻辑(只要是可复用的逻辑)
// 3.把组件中用到的状态或者回调return出去(以对象或者数组)
// 4.在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用

function App() {
  // 把以下这段逻辑放到一个自定义函数里面就叫自定义hook
  // const [value, setValue] = useState(true)
  // const toggle = () => {
  //   setValue(!value)
  // }
  const { value, toggle } = useToggle()

  return (
    <div>
      <h1>This is APP :自定义hook</h1>
      {/**当show为true时显示Son组件 */}
      {value && <div>This is a toggle Test</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  )
}

export default App;